<script setup lang="ts">
import ActiveRadio from "@/static/mine/active_check.png";
import Radio from "@/static/mine/check.png";
import { ref, onMounted } from "vue";

export interface GenderListProps {
  icon: string;
  radio: string;
  active_radio: string;
  label: string;
  label_id: string;
  isCheck: boolean;
}

const genderList = ref<GenderListProps[]>([
  {
    icon: "https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/male.png",
    label: "男",
    label_id: "1",
    isCheck: true,
    radio: Radio,
    active_radio: ActiveRadio
  },
  {
    icon: "https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/female.png",
    label: "女",
    label_id: "2",
    isCheck: false,
    radio: Radio,
    active_radio: ActiveRadio
  }
]);

const props = withDefaults(defineProps<{ current?: string }>(), {
  current: "1"
});
const genderInfo = ref<{ label: string; label_id: string }>({
  label: genderList.value[0].label,
  label_id: genderList.value[0].label_id
});

onMounted(() => {
  genderList.value.forEach(genderItem => {
    if (genderItem.label_id === props.current) {
      genderItem.isCheck = true;
      genderInfo.value = {
        label: genderItem.label,
        label_id: genderItem.label_id
      };
    } else {
      genderItem.isCheck = false;
    }
  });
});
const emits = defineEmits(["onClick"]);

const handleChange = (item: GenderListProps) => {
  genderList.value.forEach(genderItem => {
    genderItem.isCheck = false;
  });

  // 反转传入的 item 的 isCheck
  item.isCheck = !item.isCheck;
  genderInfo.value = {
    label: item.label,
    label_id: item.label_id
  };
};

const onClick = () => {
  emits("onClick", genderInfo.value);
};
</script>

<template>
  <Flex class="gender-info" justify="space-evenly">
    <Flex
      v-for="item in genderList"
      direction="column"
      :key="item.label_id"
      @click="handleChange(item)"
    >
      <view class="label">{{ item.label }}</view>
      <image class="img" :src="item.icon" alt="" />
      <image
        class="radio"
        :src="item.isCheck ? item.active_radio : item.radio"
        alt=""
      />
    </Flex>
  </Flex>
  <t-button @click="onClick" class="btn">确定</t-button>
</template>

<style lang="scss" scoped>
.gender-info {
  margin: 33px 0;
}
.img {
  width: 96px;
  height: 96px;
  margin: 6px 0 8px;
}

.radio {
  width: 20px;
  height: 20px;
}

.btn {
  margin-bottom: 28px !important;
}
</style>
